<template>
  <div class="SJdiv1">
    <div class="SJdiv2">
      <span
        style="
          font-size: 25px;
          font-family: Source Han Sans CN;
          font-weight: bold;
          color: #051232;
          line-height: 84px;
          margin-left: 10px;
        "
        >询价中心</span
      >
      <div class="con_boxs">
        <!-- 搜索 -->
        <div class="con_sousuo">
          <el-form
            :inline="true"
            :model="formWtzx"
            class="demo-form-inline"
            label-width="150px"
          >
            <el-form-item label="企业名称:">
              <el-input
                v-model="formWtzx.enterpriseName"
                placeholder="企业名称"
              ></el-input>
            </el-form-item>

            <el-form-item label="承兑行号:">
              <el-input
                v-model="formWtzx.acceptBankNumber"
                placeholder="承兑行号"
              ></el-input>
            </el-form-item>
            <el-form-item label="界面金额:">
              <el-input
                v-model="formWtzx.billMoney"
                placeholder="界面金额"
              ></el-input>
            </el-form-item>
            <el-form-item label="订单状态:">
              <el-select
                v-model="formWtzx.orderStatus"
                placeholder="状态"
                style="width: 186px"
              >
                <el-option label="全部" value="5"></el-option>
                <el-option label="待确认" value="0"></el-option>
                <el-option label="贴现中" value="1"></el-option>
                <el-option label="已完成" value="2"></el-option>
                <el-option label="已过期" value="3"></el-option>
                <el-option label="已驳回" value="4"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="票据号:">
              <el-input
                v-model="formWtzx.billNumber"
                placeholder="请输入票据号"
              ></el-input>
            </el-form-item>
            <el-form-item style="position: initial; margin-left: 77px">
              <el-button type="primary" @click="weitList(formWtzx)"
                >查询</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <div class="tb">
      <el-tabs
        v-model="formt.orderStatus"
        @tab-click="handleClick"
        class="tbsa"
      >
        <el-tab-pane :label="'全部' + quanbu" name="5">
          <!-- 列表 -->
          <div class="con_table">
            <el-table
              :data="tableData"
              :header-cell-style="{ background: '#f5fafd', color: '#818EA8' }"
              style="width: 100%"
              @filter-change="filterChange"
            >
              <!-- 列表数据 -->
              <el-table-column
                prop="id"
                label="序号"
                :filters="type"
                :filter-multiple="false"
                filter-placement="right-end"
              >
                <template slot-scope="scope">
                  <span
                    >{{ (page.current - 1) * page.size + (scope.$index + 1) }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="enterpriseName" label="企业名称">
              </el-table-column>
              <el-table-column prop="billNumber" label="票据号码">
              </el-table-column>
              <el-table-column prop="acceptBankNumber" label="承兑行号">
              </el-table-column>
              <el-table-column prop="billMoney" label="票面金额(万元)">
              </el-table-column>
              <el-table-column prop="expireTime"  :formatter="dateFormat"  label="到期日">
              </el-table-column>
              <el-table-column prop="dealPrice" label="交易价格(%)">
              </el-table-column>
              <el-table-column label="倒计时(分钟)">
                <template slot-scope="scope">
                  <div class="timefloat">
                    <i
                      class="el-icon-time yellow_text"
                      style="font-size: 14px"
                    ></i>
                    {{ scope.row.surplusTime }}
                  </div>
                </template>
              </el-table-column>
              <!-- <el-table-column prop="surplusTime" label="倒计时">
              </el-table-column> -->
              <!-- <el-table-column prop="bankName" label="贴现行名称">
              </el-table-column> -->
              <!-- 列表数据end -->

              <!-- 操作按钮 -->
              <el-table-column fixed="right" label="操作" width="200">
                <template slot-scope="scope">
                  <!-- <el-button
                  @click="handleClick(scope.row)"
                  type="primary"
                  size="small"
									round
                  >查看详情</el-button
                > -->
                  <el-button type="text" size="small" @click="edits(scope.row)"
                    >查看详情</el-button
                  >
                  <el-button
                    type="text"
                    size="small"
                    @click="chengjiao(scope.row)"
                    v-if="orderStatus === 1"
                    >成交</el-button
                  >
                  <el-button
                    type="text"
                    size="small"
                    v-if="orderStatus === 1"
                    @click="bohui(scope.row)"
                    >驳回</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 分页 -->
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page.current"
              :page-sizes="page.PageRange"
              :page-size="page.size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.total"
            >
            </el-pagination>
          </div>
          <!-- 分页end -->
        </el-tab-pane>
        <el-tab-pane :label="'待确认' + dqur" name="0">
          <!-- 列表 -->
          <div class="con_table">
            <el-table
              :data="tableData"
              :header-cell-style="{ background: '#f5fafd', color: '#818EA8' }"
              style="width: 100%"
              @filter-change="filterChange"
            >
              <!-- 列表数据 -->
              <el-table-column prop="id" label="序号">
                <template slot-scope="scope">
                  <span
                    >{{ (page.current - 1) * page.size + (scope.$index + 1) }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="updateTime" label="更新时间" width="160px">
              </el-table-column>
              <el-table-column prop="enterpriseName" label="企业名称">
              </el-table-column>

              <el-table-column prop="billNumber" label="票据号码" width="160px">
              </el-table-column>
              <!-- <el-table-column prop="acceptBankNumber" label="承兑行号">
              </el-table-column> -->
              <el-table-column prop="billMoney" label="票面金额(万元)">
              </el-table-column>
              <el-table-column prop="expireTime" :formatter="dateFormat" label="到期日" width="160px">
              </el-table-column>
              <el-table-column prop="dealPrice" label="价格(%)">
              </el-table-column>
              <el-table-column label="倒计时(分钟)">
                <template slot-scope="scope">
                  <div class="timefloat">
                    <i
                      class="el-icon-time yellow_text"
                      style="font-size: 14px"
                    ></i>
                    {{ scope.row.surplusTime }}
                  </div>
                </template>
              </el-table-column>
              <!-- 列表数据end -->

              <!-- 操作按钮 -->
              <el-table-column fixed="right" label="操作" width="200">
                <template slot-scope="scope">
                  <!-- <el-button
                  @click="handleClick(scope.row)"
                  type="primary"
                  size="small"
									round
                  >查看详情</el-button
                > -->
                  <el-button type="text" size="small" @click="edits(scope.row)"
                    >查看详情</el-button
                  >
                  <el-button
                    type="text"
                    size="small"
                    v-if="orderStatus === 1"
                    @click="chengjiao(scope.row)"
                    >成交</el-button
                  >
                  <el-button
                    type="text"
                    v-if="orderStatus === 1"
                    size="small"
                    @click="bohui(scope.row)"
                    >驳回
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 分页 -->
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page.current"
              :page-sizes="page.PageRange"
              :page-size="page.size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.total"
            >
            </el-pagination>
          </div>
          <!-- 分页end -->
        </el-tab-pane>
        <el-tab-pane :label="'贴现中' + txz" name="1">
          <!-- 列表 -->
          <div class="con_table">
            <el-table
              :data="tableData"
              :header-cell-style="{ background: '#f5fafd', color: '#818EA8' }"
              style="width: 100%"
              @filter-change="filterChange"
            >
              <!-- 列表数据 -->
              <el-table-column prop="account" label="序号"> </el-table-column>
              <el-table-column prop="billNumber" label="票据号码">
              </el-table-column>
              <el-table-column prop="acceptor" label="承兑行号">
              </el-table-column>
              <el-table-column prop="billMoney" label="票面金额">
              </el-table-column>
              <el-table-column prop="expireTime" :formatter="dateFormat" label="到期日" width="180px">
              </el-table-column>
              <el-table-column prop="serviceCharge" label="交易价格(%)">
              </el-table-column>
              <el-table-column prop="bankName" label="贴现行名称">
              </el-table-column>
              <el-table-column label="倒计时(分钟)">
                <template slot-scope="scope">
                  <div class="timefloat">
                    <i
                      class="el-icon-time yellow_text"
                      style="font-size: 14px"
                    ></i>
                    {{ scope.row.surplusTime }}
                  </div>
                </template>
              </el-table-column>
              <!-- 列表数据end -->

              <!-- 操作按钮 -->
              <el-table-column fixed="right" label="操作" width="150">
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="edits(scope.row)"
                    >查看详情</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 分页 -->
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page.current"
              :page-sizes="page.PageRange"
              :page-size="page.size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.total"
            >
            </el-pagination>
          </div>
          <!-- 分页end -->
        </el-tab-pane>
        <el-tab-pane :label="'已完成' + ywc" name="2">
          <!-- 列表 -->
          <div class="con_table">
            <el-table
              :data="tableData"
              :header-cell-style="{ background: '#f5fafd', color: '#818EA8' }"
              style="width: 100%"
              @filter-change="filterChange"
            >
              <!-- 列表数据 -->
              <el-table-column prop="id" label="序号">
                <template slot-scope="scope">
                  <span
                    >{{ (page.current - 1) * page.size + (scope.$index + 1) }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="createTime" label="委托时间">
              </el-table-column>
              <el-table-column prop="billNumber" label="票据号码">
              </el-table-column>
              <el-table-column prop="acceptBankNumber" label="承兑行号">
              </el-table-column>
              <el-table-column prop="billMoney" label="票面金额">
              </el-table-column>
              <el-table-column prop="expireTime" :formatter="dateFormat"  label="到期日">
              </el-table-column>
              <el-table-column prop="dealPrice" label="交易价格(%)">
              </el-table-column>
              <!-- <el-table-column prop="bankName" label="贴现行名称">
              </el-table-column> -->
              <!-- 列表数据end -->

              <!-- 操作按钮 -->
              <el-table-column fixed="right" label="操作" width="200">
                <template slot-scope="scope">
                  <!-- <el-button
                  @click="handleClick(scope.row)"
                  type="primary"
                  size="small"
									round
                  >查看详情</el-button
                > -->
                  <el-button type="text" size="small" @click="edits(scope.row)"
                    >查看详情</el-button
                  >
                  <!-- <el-button
                    type="text"
                    size="small"
                    @click="chengjiao(scope.row)"
                    >成交</el-button
                  >
                  <el-button type="text" size="small" @click="bohui(scope.row)"
                    >驳回</el-button
                  > -->
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 分页 -->
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page.current"
              :page-sizes="page.PageRange"
              :page-size="page.size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.total"
            >
            </el-pagination>
          </div>
          <!-- 分页end -->
        </el-tab-pane>
        <el-tab-pane :label="'已驳回' + ybh" name="4">
          <!-- 列表 -->
          <div class="con_table">
            <el-table
              :data="tableData"
              :header-cell-style="{ background: '#f5fafd', color: '#818EA8' }"
              style="width: 100%"
              @filter-change="filterChange"
            >
              <!-- 列表数据 -->
              <el-table-column prop="id" label="序号">
                <template slot-scope="scope">
                  <span
                    >{{ (page.current - 1) * page.size + (scope.$index + 1) }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="entrustBeginTime" label="委托时间">
              </el-table-column>
              <el-table-column prop="billNumber" label="票据号码">
              </el-table-column>
              <el-table-column prop="acceptBankNumber" label="承兑行号">
              </el-table-column>
              <el-table-column prop="billMoney" label="票面金额">
              </el-table-column>
              <el-table-column prop="expireTime" :formatter="dateFormat"  label="到期日">
              </el-table-column>
              <el-table-column prop="dealPrice" label="交易价格(%)">
              </el-table-column>
              <!-- <el-table-column prop="bankName" label="贴现行名称">
              </el-table-column> -->
              <!-- 列表数据end -->

              <!-- 操作按钮 -->
              <el-table-column fixed="right" label="操作" width="150">
                <template slot-scope="scope">
                  <!-- <el-button
                  @click="handleClick(scope.row)"
                  type="primary"
                  size="small"
									round
                  >查看详情</el-button
                > -->
                  <el-button type="text" size="small" @click="edits(scope.row)"
                    >查看详情</el-button
                  >
                  <!-- <el-button
                    type="text"
                    size="small"
                    @click="chengjiao(scope.row)"
                    >成交</el-button
                  >
                  <el-button type="text" size="small" @click="bohui(scope.row)"
                    >驳回</el-button
                  > -->
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 分页 -->
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page.current"
              :page-sizes="page.PageRange"
              :page-size="page.size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.total"
            >
            </el-pagination>
          </div>
          <!-- 分页end -->
        </el-tab-pane>
        <el-tab-pane :label="'已过期' + ygq" name="3">
          <!-- 列表 -->
          <div class="con_table">
            <el-table
              :data="tableData"
              :header-cell-style="{ background: '#f5fafd', color: '#818EA8' }"
              style="width: 100%"
              @filter-change="filterChange"
            >
              <!-- 列表数据 -->
              <el-table-column prop="id" label="序号">
                <template slot-scope="scope">
                  <span
                    >{{ (page.current - 1) * page.size + (scope.$index + 1) }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="entrustBeginTime" label="委托时间">
              </el-table-column>
              <el-table-column prop="billNumber" label="票据号码">
              </el-table-column>
              <el-table-column prop="acceptBankNumber" label="承兑行号">
              </el-table-column>
              <el-table-column prop="billMoney" label="票面金额">
              </el-table-column>
              <el-table-column prop="expireTime" :formatter="dateFormat"  label="到期日">
              </el-table-column>
              <el-table-column prop="dealPrice" label="交易价格(%)">
              </el-table-column>
              <!-- <el-table-column prop="bankName" label="贴现行名称">
              </el-table-column> -->
              <!-- 列表数据end -->

              <!-- 操作按钮 -->
              <el-table-column fixed="right" label="操作" width="200">
                <template slot-scope="scope">
                  <!-- <el-button
                  @click="handleClick(scope.row)"
                  type="primary"
                  size="small"
									round
                  >查看详情</el-button
                > -->
                  <el-button type="text" size="small" @click="edits(scope.row)"
                    >查看详情</el-button
                  >
                  <!-- <el-button
                    type="text"
                    size="small"
                    @click="chengjiao(scope.row)"
                    >成交</el-button
                  >
                  <el-button type="text" size="small" @click="bohui(scope.row)"
                    >驳回</el-button
                  > -->
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 分页 -->
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page.current"
              :page-sizes="page.PageRange"
              :page-size="page.size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.total"
            >
            </el-pagination>
          </div>
          <!-- 分页end -->
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<style >
</style>

<script>
import { getBankOrderList, updateOrderStatus } from "@/api/leagues/app";
import moment from "moment";
export default {
  data() {
    return {
      input: "", //搜索框
      formt: {
        orderStatus: "5",
      },
      orderStatus: "",
      formWtzx: {
        //orderStatus:"",
        entrustBeginTime: "",
        entrustEndTime: "",
        billNumber: "",
        acceptor: "",
        acceptBankNumber: "",
      },
      formm: {
        orderId: "",
        orderOperate: "",
      },
      // 列表
      tableData: [],
      quanbu: "0",
      dqur: "0",
      txz: "0",
      ywc: "0",
      ybh: "0",
      ygq: "0",
      // 分页
      page: {
        current: 1, //默认从第一页开始
        PageRange: [10, 20, 30], //规定多少个页算一个区间
        total: 0,
        size: 10,
      },
    };
  },
  mounted() {
    this.weitList();
  },

  computed: {
    num: function () {
      return this.tableData.length;
    },
  },
  //方法集合
  methods: {
     dateFormat: function (row, column) {
      var date = row[column.property];

      if (date == undefined) {
        return "";
      }

      return moment(date).format("YYYY-MM-DD");
    },

    // 列表操作安钮
    handleClick(tab, event) {
      console.log(tab, "tab");
      console.log(event, "event");
      this.formt.orderStatus = tab.name;
      this.weitList();
    },
    //列表this.formt

    weitList: function () {
      let params = this.formt;
      let page = this.page;
      let formWtzx = this.formWtzx;
      getBankOrderList(
        Object.assign(
          {
            current: page.current,
            size: page.size,
          },
          params,
          formWtzx
        )
      ).then((response) => {
        if (response) {
          var that = this;
          that.tableData = response.data.data.records;
          this.page.size = response.data.data.size;
          this.page.current = response.data.data.current;
          this.page.total = response.data.data.total;

          if (this.formt.orderStatus == 5) {
            this.quanbu = this.page.total;
          } else if (this.formt.orderStatus == 0) {
            this.dqur = this.page.total;
          } else if (this.formt.orderStatus == 1) {
            this.txz = this.page.total;
          } else if (this.formt.orderStatus == 2) {
            this.ywc = this.page.total;
          } else if (this.formt.orderStatus == 4) {
            this.ybh = this.page.total;
          } else if (this.formt.orderStatus == 3) {
            this.ygq = this.page.total;
          }
          //给每一列生成一个时间戳
          this.tableData.forEach((el, index) => {
            // el.countdown = Date.now(); //模拟后端发的时间戳
            if (parseInt(el.surplusTime) > 0) {
              let time_ = parseInt(el.surplusTime);
              // let c = a / 1000;
              let interval_ = setInterval(() => {
                if (time_ >= 0) {
                  time_ = time_ - 1;
                  // 小时
                  const h = parseInt(time_ / 3600);
                  // 分钟数
                  const m = parseInt((time_ - 3600 * h) / 60);
                  // 秒数
                  const s = parseInt(time_ - 3600 * h - 60 * m);
                  let Htimer = h + ":" + m + ":" + s;
                  this.tableData[index].surplusTime = Htimer;
                  this.$set(this.tableData[index], "surplusTime", Htimer);
                } else {
                  clearInterval(interval_);
                }
              }, 1000);
            }
          });

          // that.$message({
          //   duration: 600,
          //   message: "查询成功",
          //   type: "success",
          // });
        } else {
          that.$message.success(response.msg);
        }
      });
    },

    filterChange(filters) {
      for (const key in filters) {
        if (filters[key].length > 0) {
          // 配合data中定义的数据枚举数组type，确定操作的是那一列
          if (filters[key][0].substr(0, 1) === "p") {
            let queryParams = null;
            // 获取选中的枚举值
            queryParams = filters[key][0].substr(1, 2);
            // 1、用的是静态数据，根据枚举值确定tableData
            // 2、如果用的是http请求的话，将queryParams作为参数去获取结果集，赋值给tableData即可
            if (queryParams === "") {
              this.tableData = this.tableData;
            } else {
              this.tableData = this.tableData.filter(
                (item) => item.status === queryParams
              );
            }
          }
        }
      }
    },

    chengjiao(row) {
      this.formm.orderId = row.orderId;
      this.formm.orderOperate = "成交";
      this.$confirm("即将成交, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          updateOrderStatus(this.formm)
            .then((res) => {
              // this.$message({
              //   type: "success",
              //   message: res.data.msg,
              // });
            })
            .catch(() => {
              // loading();
            });
        })
        .catch((res) => {
          this.$message({
            type: "info",
            message: res.data.msg,
          });
        });
    },
    bohui(row) {
      this.formm.orderId = row.orderId;
      this.formm.orderOperate = "驳回";
      this.$confirm("即将驳回, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          updateOrderStatus(this.formm)
            .then((res) => {
              // this.$message({
              //   type: "success",
              //   message: res.data.msg,
              // });
            })
            .catch(() => {
              loading();
            });
        })
        .catch((res) => {
          this.$message({
            type: "info",
            message: res.data.msg,
          });
        });
    },
    // qureyForm: function () {chengjiao  bohui
    //   querywt(this.formWtzx).then((response) => {
    //     if (response) {
    //       this.weitList();
    //     // this.$message.success("查询成功");
    //     } else {
    //       this.$message.success(response.msg);
    //     }
    //   //  that.$message.success(data.msg)
    //   });
    // },
    edits(row) {
      //详情
      // this.editNetWork = row;
      // this.editRowId = row.id;
      this.$router.push({
        path: "editorder",
        query: {
          editRowId: row.orderId,
          editNetWork: row,
          surplusTime: row.surplusTime,
        },
      });
    },

    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.page.current = val;
      this.weitList();
      console.log(`当前页: ${val}`);
    },
    PageRangeDate() {
      this.tableData.forEach((ele) => {
        this.PageRange.push(ele.id);
      });
      console.log(this.PageRange, "tab");
    },
    // 分页end
  },
};
</script>
<style  scoped>
.SJdiv1 {
  width: 1200px;
  /* height: 850px; */
  background: #ffffff;
  /* box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.06); */
  border-radius: 6px 6px 10px 10px;
  margin: 0 auto;
  position: relative;
  top: 50%;
}
.shula {
  width: 6px;
  height: 9px;
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 49px;
}
.tb {
  /* margin-left: 20px; */
  margin-top: 20px;
}
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 186px !important;
}
.tbsa {
  /* width: 902px; */
  height: 40px;

  border: 1px solid #bdc3ca;
  border-radius: 20px;
}

>>> .el-tabs__nav {
  /* width: 311px; */
  height: 40px;
  border-radius: 20px;
  text-align: center;
}
>>> .el-tabs__content {
  margin-top: 11px;
}
/*tabs 去掉el-tab-pane切换时的蓝色下划线*/
>>> .el-tabs__active-bar {
  background-color: transparent !important;
}
>>> .el-tabs__nav-wrap::after {
  background-color: transparent !important;
}
>>> .el-tabs__header {
  margin: 0 auto !important;
  width: 1200px;
}

>>> .el-tabs__nav {
  width: 311px;
  height: 40px;
  background: transparent !important;
  border-radius: 20px;
  text-align: center;
}
>>> .el-tabs__item.is-active {
  background: #0075ff;
  box-shadow: 0px 3px 8px 0px rgba(0, 117, 255, 0.2);
  border-radius: 20px;
}
>>> .el-tabs__item {
  width: 150px;
  height: 40px;
  color: #8995ad;
}
>>> .el-tabs__item.is-active {
  color: #ffffff;
}
</style>
